<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="container_logzbuf">
    </div>
  </div>
  
  <script src="../libs/three.js"></script>
  <script src="../libs/stats.min.js"></script>
  <script src="../libs/controls/TrackballControls.js"></script>
  <script src="../libs/loader/OBJLoader.js"></script>

  <script>
  var view = {};
  var controls;
  var FOV = 75, NEAR = 0.1, FAR = 1000;
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  init();
  
  function init() {
    var scene = initScene();
    view = initView(scene);
    controls = new THREE.TrackballControls( view.camera );

    animate();
  }
  
  function initScene() {
    var scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0x3f2806));
    
    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 100, 100);
    scene.add(light);
    
    var texture = new THREE.TextureLoader().load('./img/najiang1.jpg');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(40, 40);
    
    var material = new THREE.ShaderMaterial({
      uniforms: {
        time: {
          type: "f",
          value: 0
        },
        weight: {
          type: "f",
          value: 0
        },
        periodPn: {
          type: "f",
          value: 0
        },
        relectionTexture: {
          type: "t",
          value: texture
        },
        ior: {
          type: "f",
          value: .7
        },
        addReflection: {
          type: "f",
          value: 0
        },
        colorAbberation: {
          type: "f",
          value: 5e-4
        },
        refraction: {
          type: "f",
          value: 1
        },
        frenselPower: {
          type: "f",
          value: 2.75
        },
        lightDiffuseBrightness: {
          type: "f",
          value: .1
        },
        lightSpecularPower: {
          type: "f",
          value: 80
        },
        lightSpecularBrightness: {
          type: "f",
          value: .8
        },
        refractionTiling: {
          type: "2f",
          value: [4, 4]
        },
        reflectionBrightness: {
          type: "f",
          value: .9
        },
        refractionBrightness: {
          type: "f",
          value: .9
        },
        refractionBlend: {
          type: "f",
          value: .86
        },
        externalReflectionBlend: {
          type: "f",
          value: .86
        },
        globalOpacity: {
          type: "f",
          value: 1
        }
      },
      vertexShader: gem_vertex(),
      fragmentShader: gem_fragment(),
      shading: THREE.SmoothShading,
      wireframe: false,
      transparent: true
    });
    var loader = new THREE.OBJLoader();
    loader.load('./drop_gem5.obj', function (object) {
      var mesh = object.children[0];
      mesh.material = material;
      mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.8;
      scene.add(object);
      console.log(object);
      console.log('aassss', material);
    });
    
    return scene;
  }
  
  function initView(scene) {
    var framecontainer = document.getElementById('container_logzbuf');
    var camera = new THREE.PerspectiveCamera(FOV, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR);
    camera.position.set(2, 2, 5);
    scene.add(camera);
    
    var renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
    renderer.setClearColor(0xf0f0f0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.domElement.style.position = 'relative';
    renderer.domElement.id = 'renderer_logzbuf';
    framecontainer.appendChild(renderer.domElement);
    
    return {
      container: framecontainer,
      renderer: renderer,
      scene: scene,
      camera: camera
    };
  }
  
  function animate() {
    requestAnimationFrame(animate);
    controls.update();

    render();
  }
  function render() {
    updateRendererSizes();
    view.renderer.render(view.scene, view.camera);
  }
  
  function updateRendererSizes() {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    
    view.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    view.camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    view.camera.updateProjectionMatrix();
    view.camera.setViewOffset(SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    view.container.style.width = 100 + '%';
  }
  
  function gem_vertex() {
    return  "varying vec2 vUv;\nvarying vec3 vModelNormal;\nvarying vec3 vViewNormal;\nvarying vec3 vReflect;\nvarying vec3 vRefract;\nvarying vec3 vRefractG;\nvarying vec3 vRefractB;\nvarying vec3 vViewDirection;\n\nuniform float ior;\nuniform float colorAbberation;\n\nuniform float externalReflectionBlend;\n\nvarying vec3 pos;\nvarying float ao;\nvarying float ao2;\nvarying float d;\nuniform float time;\nuniform float weight;\nuniform float periodPn;\n\nvec3 mod289(vec3 x)\n    {\n      return x - floor(x * (1.0 / 289.0)) * 289.0;\n    }\n\n    vec4 mod289(vec4 x)\n    {\n      return x - floor(x * (1.0 / 289.0)) * 289.0;\n    }\n\n    vec4 permute(vec4 x)\n    {\n      return mod289(((x*34.0)+1.0)*x);\n    }\n\n    vec4 taylorInvSqrt(vec4 r)\n    {\n      return 1.79284291400159 - 0.85373472095314 * r;\n    }\n\n    vec3 fade(vec3 t) {\n      return t*t*t*(t*(t*6.0-15.0)+10.0);\n    }\n\n// Classic Perlin noise, periodic variant\n    float pnoise(vec3 P, vec3 rep)\n    {\n      vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period\n      vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period\n      Pi0 = mod289(Pi0);\n      Pi1 = mod289(Pi1);\n      vec3 Pf0 = fract(P); // Fractional part for interpolation\n      vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n      vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n      vec4 iy = vec4(Pi0.yy, Pi1.yy);\n      vec4 iz0 = Pi0.zzzz;\n      vec4 iz1 = Pi1.zzzz;\n\n      vec4 ixy = permute(permute(ix) + iy);\n      vec4 ixy0 = permute(ixy + iz0);\n      vec4 ixy1 = permute(ixy + iz1);\n\n      vec4 gx0 = ixy0 * (1.0 / 7.0);\n      vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n      gx0 = fract(gx0);\n      vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n      vec4 sz0 = step(gz0, vec4(0.0));\n      gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n      gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n      vec4 gx1 = ixy1 * (1.0 / 7.0);\n      vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n      gx1 = fract(gx1);\n      vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n      vec4 sz1 = step(gz1, vec4(0.0));\n      gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n      gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n      vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n      vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n      vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n      vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n      vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n      vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n      vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n      vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n      vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n      g000 *= norm0.x;\n      g010 *= norm0.y;\n      g100 *= norm0.z;\n      g110 *= norm0.w;\n      vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n      g001 *= norm1.x;\n      g011 *= norm1.y;\n      g101 *= norm1.z;\n      g111 *= norm1.w;\n\n      float n000 = dot(g000, Pf0);\n      float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n      float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n      float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n      float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n      float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n      float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n      float n111 = dot(g111, Pf1);\n\n      vec3 fade_xyz = fade(Pf0);\n      vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n      vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n      float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \n      return 2.2 * n_xyz;\n    }\n\n    float stripes( float x, float f) {\n        float PI = 3.14159265358979323846264;\n        float t = .5 + .5 * sin( f * 2.0 * PI * x);\n        return t * t - .5;\n      }\n      \n      float turbulence( vec3 p ) {\n        float w = 100.0;\n        float t = -.5;\n        for (float f = 1.0 ; f <= 10.0 ; f++ ){\n          float power = pow( 2.0, f );\n          t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );\n        }\n        return t;\n      }\n\n\nvoid main() {\n    vUv = uv;\n\n    vec4 mPosition = modelMatrix * vec4( position, 1.0 );\n\n    vViewDirection = normalize(cameraPosition - mPosition.xyz);\n\n    vec3 nWorld = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );\n\n    vModelNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );\n\n    vViewNormal = normalize( mat3( modelViewMatrix[0].xyz, modelViewMatrix[1].xyz, modelViewMatrix[2].xyz ) * normal );\n\n    vReflect = normalize( reflect( normalize( mPosition.xyz - cameraPosition ), vModelNormal ) );\n\n    vRefract = normalize( refract( normalize( mPosition.xyz - cameraPosition ), vModelNormal, ior ) );\n    vRefractG = normalize( refract( normalize( mPosition.xyz - cameraPosition ), vModelNormal, ior * (1.0 - colorAbberation) ) );\n    vRefractB = normalize( refract( normalize( mPosition.xyz - cameraPosition ), vModelNormal, ior * (1.0 - colorAbberation * 2.0) ) );\n\n\n\n    float noise = 20.0 *  .90 * turbulence( .5 * normal + time );\n    float displacement = - weight * noise;\n    displacement += periodPn * pnoise( 0.06 * position + vec3( 2.0 * time ), vec3( 1.5 ) );\n\n\n\n    vec3 newPosition = position  + normal * vec3( displacement );\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );\n\n}";
  }
  
  function gem_fragment() {
    return   "varying vec2 vUv;\nvarying vec3 vModelNormal;\nvarying vec3 vViewNormal;\nvarying vec3 vReflect;\nvarying vec3 vRefract;\nvarying vec3 vRefractG;\nvarying vec3 vRefractB;\nvarying vec3 vViewDirection;\n\nuniform vec2 refractionTiling;\n\nuniform float addReflection;\n\nuniform float externalReflectionBlend;\nuniform float refractionBlend;\n\nuniform float frenselPower;\n\nuniform float reflectionBrightness;\nuniform float refractionBrightness;\n\nuniform float refraction;\n\nuniform float lightDiffuseBrightness;\nuniform float lightSpecularPower;\nuniform float lightSpecularBrightness;\n\nuniform float globalOpacity;\n\nuniform sampler2D relectionTexture;\n\nfloat PI = 3.14159265358979323846264;\n\nfloat random(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}\n\nvoid main() {\n\n  vec2 reflectionCoord = vec2((vReflect.x * 0.25 + 0.5) * refractionTiling.x, (1.0 - vReflect.y * 0.25 + 0.5) * refractionTiling.y);\n  reflectionCoord.xy = vec2(fract(reflectionCoord.x), fract(reflectionCoord.y));\n  vec3 reflectionColor = texture2D( relectionTexture, reflectionCoord.xy ).rgb;\n\n  reflectionColor *= reflectionBrightness;\n\n  vec2 refractionCoord = vec2((vRefract.x * 0.25 + 0.5) * refractionTiling.x, (vRefract.y * 0.25 + 0.5) * refractionTiling.y);\n  refractionCoord.xy = vec2(fract(refractionCoord.x), fract(refractionCoord.y));\n  vec3 refractionColor = vec3(0.0);\n  refractionColor.r = texture2D( relectionTexture, refractionCoord.xy ).r;\n\n  refractionCoord = vec2((vRefractG.x * 0.25 + 0.5) * refractionTiling.x, (vRefractG.y * 0.25 + 0.5) * refractionTiling.y);\n  refractionCoord.xy = vec2(fract(refractionCoord.x), fract(refractionCoord.y));\n  refractionColor.g = texture2D( relectionTexture, refractionCoord.xy ).g;\n\n  refractionCoord = vec2((vRefractB.x * 0.25 + 0.5) * refractionTiling.x, (vRefractB.y * 0.25 + 0.5) * refractionTiling.y);\n  refractionCoord.xy = vec2(fract(refractionCoord.x), fract(refractionCoord.y));\n  refractionColor.b = texture2D( relectionTexture, refractionCoord.xy ).b;\n\n  refractionColor *= refractionBrightness;\n\n  float fresnelAngle;\n\n  fresnelAngle = 1.0 - dot(vViewNormal, vec3(0.0, 0.0, 1.0));\n\n  float fresnelAmount = pow(fresnelAngle, frenselPower);\n  fresnelAmount = 1.0 - (1.0 - fresnelAmount) * refractionBlend;\n\n  refractionColor = mix(vec3(0.0), refractionColor, refraction);\n\n  vec3 blendedColor;\n  if (addReflection == 1.0) {\n    blendedColor = refractionColor + reflectionColor * fresnelAmount;\n  } else {\n    blendedColor = mix(refractionColor, reflectionColor, fresnelAmount);\n  }\n\n  vec3 lightDirection;\n  float diffuseBrightness, specularBrightness;\n\n  lightDirection = normalize(vec3(1.0, 1.0, 1.0));\n  diffuseBrightness = max(0.0, dot(lightDirection, vModelNormal)) * lightDiffuseBrightness;\n  specularBrightness = 0.0;\n  if (dot(vModelNormal, lightDirection) > 0.0) {\n    specularBrightness = pow(max(0.0, dot(reflect(-lightDirection, vModelNormal), vViewDirection)), lightSpecularPower) * lightSpecularBrightness;\n  }\n  blendedColor.xyz += vec3(diffuseBrightness + specularBrightness);\n\n  lightDirection = normalize(vec3(-1.0, 0.75, -0.75));\n  diffuseBrightness = max(0.0, dot(lightDirection, vModelNormal)) * lightDiffuseBrightness;\n  specularBrightness = 0.0;\n  if (dot(vModelNormal, lightDirection) > 0.0) {\n    specularBrightness = pow(max(0.0, dot(reflect(-lightDirection, vModelNormal), vViewDirection)), lightSpecularPower) * lightSpecularBrightness;\n  }\n  blendedColor.xyz += vec3(diffuseBrightness + specularBrightness);\n\n  lightDirection = normalize(vec3(0.5, -0.5, -0.5));\n  diffuseBrightness = max(0.0, dot(lightDirection, vModelNormal)) * lightDiffuseBrightness;\n  specularBrightness = 0.0;\n  if (dot(vModelNormal, lightDirection) > 0.0) {\n    specularBrightness = pow(max(0.0, dot(reflect(-lightDirection, vModelNormal), vViewDirection)), lightSpecularPower) * lightSpecularBrightness ;//0.8; //50\n  }\n  blendedColor.xyz += vec3(diffuseBrightness + specularBrightness);\n\n  //float opacityMultiplier = globalOpacity;\n  //float opacityMultiplier = 1.0 - sin(blendedColor.r * 3.14159) * (1.0 - globalOpacity); //3.14159 //1.57079\n\n  //float opacityMultiplier = pow(sin(blendedColor.r * 3.14159), 0.8);\n  //float opacityMultiplier = 0.5 - 0.5 * cos(sin(blendedColor.r * 3.14159) * 6.2831853);\n  //float opacityMultiplier = 0.2 + 0.8 * sin(blendedColor.r * 3.14159);\n  //float opacityMultiplier = 0.2 + 0.2 * sin(blendedColor.r * 3.14159);\n  //float opacityMultiplier = 0.1 + 0.2 * pow(sin(blendedColor.r * 3.14159), 2.0);\n  //opacityMultiplier = 1.0 - opacityMultiplier * (1.0 - globalOpacity); //3.14159 //1.57079\n\n  //float opacityMultiplier = 0.2 + 0.1 * pow(sin(blendedColor.r * 3.14159), 0.5); //make midtones most transparent (base transparency + midTone transparency)\n\n  /*float opacityMultiplier = 0.2 + 0.3 * pow(sin(blendedColor.r * 3.14159), 2.0); //make midtones most transparent (base transparency + midTone transparency)\n  opacityMultiplier *= 1.0 - 0.9 * fresnelAngle; //keep drop edges reasonably opaque (center transparency multiplier + edge opacity value)\n  opacityMultiplier = 1.0 - opacityMultiplier * (1.0 - globalOpacity); //multiply midtones by transparency amount //3.14159 //1.57079*/\n\n  /*float opacityMultiplier = 0.2 + 0.8 * pow(sin(blendedColor.r * 3.14159), 2.0); //make midtones most transparent (base transparency + midTone transparency)\n  opacityMultiplier *= 1.0 - 0.2 * fresnelAngle; //keep drop edges reasonably opaque (center transparency multiplier + edge opacity value)\n  opacityMultiplier = 1.0 - opacityMultiplier * (1.0 - globalOpacity); //multiply midtones by transparency amount //3.14159 //1.57079*/\n\n  //float opacityMultiplier = 1.0 - blendedColor.r;\n  //float opacityMultiplier = 1.0 - max(0.5, (blendedColor.r-0.5) * 2.0 + 0.5);\n\n  float opacityMultiplier = min(1.0, blendedColor.r / 0.5); //make darks more transparent\n  opacityMultiplier = max(opacityMultiplier, 0.6 * (1.0 - min(1.0, blendedColor.r / 0.5))); //make darks a bit opaque\n  opacityMultiplier = opacityMultiplier + pow((1.0 - opacityMultiplier) * fresnelAngle, 0.8); //keep drop edges reasonably opaque\n  opacityMultiplier = 1.0 - (1.0 - opacityMultiplier) * (1.0 - globalOpacity); //multiply midtones by transparency amount //3.14159 //1.57079\n\n  /*float opacityMultiplier = 1.0 - min(1.0, blendedColor.r / 0.5); //make darks more transparent\n  opacityMultiplier = max(opacityMultiplier, max(1.0, blendedColor.r / 0.25)); //make darks a bit opaque\n  //opacityMultiplier = 0.5 + 0.5 * pow(sin(opacityMultiplier * 3.14159), 2.0); //make midtones most transparent (base transparency + midTone transparency)\n  //opacityMultiplier *= 0.5 - 0.5 * pow(sin(opacityMultiplier * 3.14159), 2.0); //make midtones most transparent (base transparency + midTone transparency)\n  //opacityMultiplier *= 1.0 - 1.0 * (1.0 - pow(sin(opacityMultiplier * 3.14159), 2.0)); //make darker areastransparent (base opacity + darkness transparency)\n  //opacityMultiplier *= 1.0 - 0.8 * fresnelAngle; //keep drop edges reasonably opaque (center transparency multiplier + edge opacity value)\n  opacityMultiplier = 1.0 - opacityMultiplier * (1.0 - globalOpacity); //multiply midtones by transparency amount //3.14159 //1.57079*/\n\n  gl_FragColor = vec4( blendedColor.xyz, opacityMultiplier);\n\n}";
  }
</script>
</body>
</html>